<template>
  <el-tooltip placement="top" :disabled="showTipDisabled" style="padding: 0">
    <div slot="content" style="max-height: 100px; overflow-y: auto;margin: -10px">
      <div style="margin: 10px"><span v-html="this.tipTxtValueArea"></span></div>
    </div>
    <el-select :clearable="clearable" v-model="currentValue"
               :collapse-tags="tags"
               :filterable="filterable"
               :multiple="multiple"
               :style="{ width : width}"
               :size="size"
               @change="selectChanged"
               :disabled="currentDisabled" :placeholder="placeholder" no-data-text="无数据">
      <el-option v-for="item in options" :key="item.DictId" :label="item.DictName" :value="item.DictId">
      </el-option>
    </el-select>
  </el-tooltip>
</template>

<script>
export default {
  inheritAttrs: false,
  components: {},
  props: {
    tags: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    value: {
      type: [Number, String, Array],
      default: function () {
        return null
      }
    },
    size: {
      type: String,
      default: function () {
        return 'medium'
      }
    },
    disabled: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    // 是否可搜索
    filterable: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    clearable: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    multiple: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    addItems: {
      type: Array,
      default: function () {
        return null
      }
    },
    exclude: {
      type: Array,
      default: function () {
        return []
      }
    },
    placeholder: {
      type: String,
      default: function () {
        return '请选择'
      }
    },
    dictTypeCode: {
      type: [String, Number],
      default: function () {
        return ''
      }
    },
    // 重新加载数据（每次取非即可）
    reload: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    width: {
      type: String,
      default: function () {
        return '100%'
      }
    },
    name: {
      type: String
    },
    // 缓存调用组件传递的数据，change事件抛出
    bufferParams: {
      type: Object,
      default: function () {
        return null
      }
    }
  },
  data () {
    return {
      currentDisabled: this.disabled,
      options: null,
      count: 0,
      oldValue: null,
      tipTxtValueArea: ''
    }
  },
  mounted () {
    this.$nextTick(function () {
      this.loadOptions()
    })
  },
  computed: {
    optionValues: {
      get: function () {
        return this.options
      },
      set: function (options) {
        let exclueds = this.exclude || []
        // 过滤要排除的
        let tmpOpts
        if (options) {
          if (exclueds && exclueds.length > 0) {
            tmpOpts = options.filter(item => {
              return !exclueds.some(e => e.DictId === item.DictId)
            })
          } else {
            tmpOpts = options
          }
        } else {
          this.options = []
          return
        }
        // 先添加要追加的
        if (this.addItem && this.addItem.length > 0) {
          tmpOpts.push(this.addItem)
        }
        this.options = tmpOpts
      }
    },
    currentValue: {
      get: function () {
        return this.buildCurrentValue(this.value)
      },
      set: function (value) {
        this.$emit('input', value)
        this.$emit('selectChanged', value)
      }
    },
    showTipDisabled () {
      if (!this.multiple && !this.tipTxtValueArea) return true
      return this.tipTxtValueArea.length === 0
    }
  },
  methods: {
    loadOptions: function () {
      let $this = this
      if (this.dictTypeCode && this.dictTypeCode !== '') {
        this.$store.dispatch('GetDictItems', this.dictTypeCode).then(res => {
          res.sort((a, b) => a.sortNo - b.sortNo)
          $this.optionValues = res
          $this.getTipTxtValueArea(res)
          this.getSelectChange(res)
        })
      }
    },
    buildCurrentValue: function (value) {
      if (this.multiple && !this.UtilJs.isEmpty(value)) {
        return value
      }
      if (this.multiple && this.UtilJs.isEmpty(value)) {
        return []
      }
      return value
    },
    selectChanged: function (key) {
      var $this = this
      var selectItems = null
      if (this.count === 0) {
        $this.oldValue = $this.currentValue
        $this.count ++
      }
      if (!this.multiple) {
        selectItems = this.optionValues.find(it => {
          return key === it['DictId']
        })
      } else {
        selectItems = []
        key.forEach(DictId => {
          let selectItem = this.optionValues.find(it => {
            return DictId === it['DictId']
          })
          selectItems.push(selectItem)
        })
      }
      this.$emit('selectChanged', key, $this.name, selectItems, this.bufferParams)
    },
    getSelectChange (val) {
      let $this = this
      let selectItems = null
      if (val.length > 0) {
        if (!this.multiple) {
          selectItems = val.find(it => {
            return $this.currentValue === it['DictId']
          })
        } else {
          selectItems = val.filter(it => {
            var isTrue = false
            $this.currentValue.forEach(kit => {
              if (kit === it['DictId']) {
                isTrue = true
              }
            })
            return isTrue
          })
        }
        if ($this.name && $this.currentValue) {
          this.$emit('selectChanged', this.currentValue, this.name, selectItems, this.bufferParams)
        }
      }
    },
    getTipTxtValueArea (list) {
      if (this.multiple && !this.UtilJs.isEmpty(this.currentValue) && this.currentValue.length !== 0) {
        let tipStr = ''
        this.currentValue.forEach(id => {
          list.forEach(item => {
            if (item.DictId === id) {
              tipStr = tipStr + item.DictName + '<br/>'
            }
          })
        })
        this.tipTxtValueArea = tipStr
      } else {
        this.tipTxtValueArea = ''
      }
    }
  },
  watch: {
    disabled: function (value) {
      this.currentDisabled = value
    },
    // 重载数据
    reload: function () {
      this.loadOptions()
    },
    currentValue (val) {
      if (this.multiple && !this.UtilJs.isEmpty(val) && val.length !== 0 && !this.UtilJs.isEmpty(this.optionValues)) {
        let tipStr = ''
        val.forEach(id => {
          this.optionValues.forEach(item => {
            if (item.DictId === id) {
              tipStr = tipStr + item.DictName + '<br/>'
            }
          })
        })
        this.tipTxtValueArea = tipStr
      } else {
        this.tipTxtValueArea = ''
      }
    }
  }
}
</script>
